<script setup lang="ts">
// 歌手

import { onMounted, ref } from "vue-demi";
import MusicItem from "@/components/MusicItem/index.vue";
import { useRoute } from "vue-router";
import { formatNumber } from "@/utils/util";
import {
  getArtistDetail,
  getArtistFansCount,
  getArtistSongs,
} from "@/api/artist";

const isFold = ref(true);
const posInfo = ref<any>({});
const hotSongs = ref<any>([]);

const { params }: any = useRoute();

const handleFold = () => {
  isFold.value = !isFold.value;
};

onMounted(async () => {
  const res1 = await getArtistDetail(params.id);
  const res2 = await getArtistFansCount(params.id);
  posInfo.value = res1.data;
  posInfo.value.fans = res2.data;
  const res3 = await getArtistSongs({ id: params.id });
  hotSongs.value = res3.songs;
});
</script>
<template>
  <div class="m-artist" v-if="posInfo.artist">
    <div class="artist-header">
      <img class="cover" :src="posInfo.artist.cover" alt="" />
      <div class="artist-info">
        <p class="name">{{ posInfo.artist.name }}</p>
        <!-- <p class="rank">歌手榜 华语 地区 No. 1</p> -->
        <div class="simple">
          <p class="nickname">昵称：{{ posInfo.user.nickname }}</p>
          <p class="follow">
            <span>关注 {{ posInfo.fans.followCnt }}</span>
            <span class="gap">|</span>
            <span class="fans"
              >粉丝 {{ formatNumber(posInfo.fans.fansCnt) }}万</span
            >
          </p>
          <p class="identi-area">
            <span class="identi-tag">{{
              posInfo.artist.identifyTag.join(",")
            }}</span>
            <span
              class="identi"
              v-for="t in posInfo.artist.identities"
              :key="t"
              >{{ t }}</span
            >
          </p>
        </div>
      </div>
    </div>
    <h2 class="title">歌手简介</h2>
    <div class="intro">
      <p class="intro-txt" :class="{ 'line-clamp-3': isFold }">
        {{ posInfo.artist.briefDesc }}
      </p>
      <div class="full" @click="handleFold">
        {{ isFold ? "完整歌手介绍" : "收起" }}
        <i class="arrow" :class="{ 'arrow-up': !isFold }"></i>
      </div>
    </div>
    <div class="hot-song mt-2">
      <h2 class="title">热门单曲</h2>
      <MusicItem :list="hotSongs" :show-index="true"></MusicItem>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.m-artist {
  background-color: #fcfcfd;

  .artist-header {
    position: relative;
    padding-top: 82.9%;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.2);
      width: 100%;
      height: 100%;
    }
  }

  .cover {
    position: absolute;
    top: 0;
  }

  .artist-info {
    position: absolute;
    left: 32px;
    bottom: 60px;
    color: #fff;
    z-index: 2;

    .name {
      font-size: 40px;
      line-height: 40px;
    }

    .rank {
      margin-top: 30px;
      font-size: 28px;
    }

    .simple {
      margin-top: 30px;
      opacity: 0.8;
      font-size: 24px;
      line-height: 24px;
    }

    .follow,
    .identi-area {
      height: 24px;
      margin-top: 20px;
    }

    .gap,
    .fans {
      margin-left: 10px;
    }

    .identi-tag {
      margin-right: 8px;
    }

    .identi {
      display: inline-block;
      padding: 4px;
      border-radius: 8px;
      border: 2px solid #fff;
      transform: scale(0.7);
      margin-left: -8px;
    }
  }

  .title {
    position: relative;
    padding: 30px;
    margin-top: -10px;
    background-color: #fff;
    font-weight: 700;
    font-size: 36px;
    z-index: 2;
  }

  .intro {
    background-color: #fff;
    padding: 0 32px 36px;

    .intro-txt {
      color: #666;
      font-size: 28px;
    }
  }

  .full {
    margin-top: 50px;
    font-size: 28px;
    color: #666;
    text-align: center;
  }

  .arrow {
    position: relative;
    left: 8px;
    top: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("@/assets/images/bottom.png") no-repeat;
    background-size: contain;

    &.arrow-up {
      transform: rotate(180deg);
      width: 24px;
      height: 24px;
      top: 4px;
    }
  }
}
</style>
